<template>
    <div class="contentor">
        <el-card class="card-box">
            <template #header>
                <div class="card-header">
                    <span>用户登录</span>
                </div>
            </template>
            <el-form ref="form" :model="form">
                <el-form-item prop="username">
                    <el-input size="large" v-model="form.username" placeholder="请输入用户名" prefix-icon="User"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input size="large" type="password" v-model="form.password" placeholder="请输入密码" prefix-icon="Lock"></el-input>
                </el-form-item>
                <!-- <el-form-item prop="code">
                    <el-input size="large" v-model="form.code" placeholder="请输入验证码" prefix-icon="Postcard"></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" size="large" @click="submitForm('form')" style="width: 100%;">登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import { login } from '@/api/login'
import cache from '@/utils/cache'
export default {
    name: 'Login',
    data() {
        return {
            form: {
                username: 'admin',
                password: 'admin@123',
                code: ''
            },
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ],
                // code: [
                //     { required: true, message: '请输入验证码', trigger: 'blur' },
                // ]
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    login(this.form).then(response => {
                        cache.session.set("token", response);
                        this.$router.push('/')
                    })
                }
            })
        }
    }
}
</script>
<style>
.contentor{
    width: 100%;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card-box{
    width: 26%;
    margin: 0 auto;
}
.card-header{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}
</style>